@mixin triangle($w,$deg){ // 绘制三角
  $deg: $deg / 2;
  $width: $w / 2;
  position: relative;
  display: flex;
  width: $w;
  height: $width / tan($deg);
  &::before{
	@extend %after;
	border:{
	  left: $width solid rgba(#fff,0);
	  right: $width  solid rgba(#fff,0);
	  bottom: ($width / tan($deg))  solid red;
	}
  }
  &::after{
	position: absolute;
	left: $w / 10;
	bottom: 0;
	$width: $w / 10 * 4;
	@extend %after;
	border:{
	  left: $width solid  rgba(#fff,0);
	  right: $width solid  rgba(#fff,0);
	  bottom: ($width / tan($deg)) solid rgba(#000,0);
	}

  }
}
// 让子元素绝对居中于父容器    前提： 父元素 position: relative;
$center-error:"可选填写：自身 宽高: $width: null, $height: null"+"——————前提： 父元素 position: relative;";
@mixin center($width: null, $height: null) {
  %mx-center {
	position: absolute;
	top: 50%;
	left: 50%;
  }
  // 填写自身 宽高
  @if($width == "test"){
	@error $center-error;
  }
  @extend %mx-center; // 提供居中硬性条件，共享区

  // 没有传递参数，使用 CSS transform 属性实现居中效果
  // 反之 使用 CSS transform 处理垂直位置
  // 传入一个参数。默认为宽度。除非注明： $height:XXpx; 未传入的使用CSS transform 属性
  @if not $width and not $height {
	transform: translate(-50%, -50%);
  } @else if $width and $height {
	width: $width;
	height: $height;
	margin: -($width / 2) #{0 0} -($height / 2);
  } @else if not $height {
	width: $width;
	margin-left: -($width / 2);
	transform: translateY(-50%);
  } @else {
	height: $height;
	margin-top: -($height / 2);
	transform: translateX(-50%);
  }
}
%center{
  @include center;
}